<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Calendar</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #app {
            /*display: inline-block;*/
            width: auto;
            margin: 200px auto;
            text-align: center;
        }

        #calendar {
            display: inline-block;
            overflow: hidden;
            margin: 200px auto;
            box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
            border-radius: 5px;
            user-select: none;
        }

        /*头部*/
        .calendar-header {
            display: flex;
            margin: 12px;
        }

        .calendar-header .calendar-header__left {
            font-size: 16px;
            cursor: pointer;
        }

        .calendar-header .calendar-header__left span {
            margin-right: 13px;
        }

        .calendar-header .calendar-header__middle {
            flex: 1;
            text-align: center;
        }

        .calendar-header__middle .calendar-header__value {
            cursor: pointer;
        }

        .calendar-header .calendar-header__right {
            font-size: 16px;
            cursor: pointer;
        }

        .calendar-header .calendar-header__right span {
            margin-left: 13px;
        }


        /*内容*/
        .calendar-table .date-table__header td {
            height: 42px;
            width: 42px;
            border-bottom: 1px solid #eee;
            text-align: center;
            font-size: 14px;
        }

        .calendar-table .date-table__body td {
            position: relative;
            width: 42px;
            height: 42px;
            text-align: center;
            font-size: 12px;
            color: #606266;
        }

        /*上个月、下个月*/
        .calendar-table .date-table__body td.prev-month,
        .calendar-table .date-table__body td.next-month {
            color: #c0c4cc;
        }

        /*hover*/
        .calendar-table .date-table__body td:hover {
            cursor: pointer;
            color: #0099ff;
        }
        .calendar-table .date-table__body td span {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 28px;
            height: 28px;
            line-height: 28px;
        }
        .calendar-table .date-table__body td.active span {
            background: #0099ff;
            color: #fff;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div id="app">
        <div id="calendar">
            <div class="calendar-header">
                <div class="calendar-header__left" data-type="prevMonth">
                    <span data-type="prevYear">《</span>
                    <span data-type="prevMonth">&larr;</span>
                </div>
                <div class="calendar-header__middle">
                    <span class="calendar-header__value"></span>
                </div>
                <div class="calendar-header__right">
                    <span data-type="nextMonth">&rarr;</span>
                    <span data-type="nextYear">》</span>
                </div>
            </div>
            <div class="calendar-body"></div>
        </div>
    </div>
    <script type="module" src="./src/app.js"></script>
</body>
</html>
